*{
  padding: 0;
  margin: 0;
}
@var1: #8b423e;
@min-h:10rem;
@max-h:@min-h*2;

.transform-s{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}


.text-c{
  color: deeppink;
  text-align: center;
}
.mt-5{
  margin-top: 2rem;
}

.box{
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  background-color: @var1 + #333;
}
.out{
  width: 80%;
  height: @min-h;
  max-height: @max-h;
  line-height: @min-h;
  margin: 0 auto;
  display: table;
  text-align: center;
}
.concent{
  width:auto;
  height: 45px;
  display: table-cell;
  background-color: @var1 - #333;
  color:red;
  font-size: 1rem;
  .border-style
}

.border-style{
  border: 0.1rem solid #0e641a;
  box-sizing: border-box;
}

.shadow-style{
  box-shadow: 0rem 1rem 1rem 2rem #f5f5f5;
}
.shops-list{
  width: 80%;
  height: auto;
  background-color: #120064;
  margin: 0 auto;
  overflow: hidden;
  padding: 2rem;
  .mt-5;
  .border-style;
}
.goods{
  width: 20%;
  height: 20rem;
  background-color: deeppink;
  position: relative;
  float: left;
  margin: 2% 2.5%;
}
.goods-top{
  width: 100%;
  height: 60%;
  position: relative;
  background-color: salmon;

}
.goods-top img{
  width: 60%;
  height:auto;
  .transform-s
}

.goods-bottom{
  width: 100%;
  height: 40%;
  background-color: #60ec4d;
  .text-c
}
